<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>图书详情</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_bk19qw3y1fh.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/book.css">
</head>

<body>
    <header>
        <div class="w100p flex aic">
            <a href="./index.html">
                <i class="iconfont icon-icon_zuo"></i>
            </a>
            <span>图书详情</span>
        </div>
    </header>

    <main>
        <div id="detail">

        </div>

        <div class="comment mt-20">
            <h3>评论</h3>
            <ul id="link">
                <!-- <li class="item flex fdc mt-10">
                    <dt class="w100p flex aic jc-sb mb-10">
                        <span class="flex aic ">
                            <img src="./img/headshot.png" alt="" class="head-img mr-10">
                            <span>tututu</span>
                        </span>
                        <span class="f666">2025/01/04</span>
                    </dt>
                    <p>很适合小孩子阅读，贴近孩子生活</p>
                </li> -->
            </ul>
        </div>
    </main>

    <p class="f888 pt-15" style="text-align: center;">没有更多了</p>

    <div class="blank">
    </div>
    <div class="bottom w100p flex jc-sa aic">
        <button id="addReading">已阅读</button>
        <button id="addToShelf">加入书架</button>
        
    </div>

    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>

    <script>
        $('#addToShelf').on('click', function () {
                Book.addBookShelf();
            })
        $('#addReading').on('click', function () {
            Book.addReading();
        });

            // 存储书本的信息
            var bookDetail = {};

            var Book = {
                // 加入书架
                addBookShelf() {
                    var url = 'http://localhost:3001/bookshelf';
                    var data = {
                        "imgUrl": bookDetail.imgUrl,
                        "bookname": bookDetail.bookname,
                        "author": bookDetail.author,
                        "ageRange": bookDetail.ageRange,
                        "category": bookDetail.category,
                        cTime: Date.now(),
                        bookId: bookDetail.id
                    };

                    axios.post(url, data).then(function (res) {
                        alert('加入成功');
                        console.log(res);
                    })
                },
            
                // 添加阅读记录
            addReading() {
                var url = 'http://localhost:3001/reading'; // 假设这是添加阅读记录的API
                var data = {
                    "imgUrl": bookDetail.imgUrl,
                    "bookname": bookDetail.bookname,
                    "author": bookDetail.author,
                    "ageRange": bookDetail.ageRange,
                    "category": bookDetail.category,
                    cTime: Date.now(),
                    bookId: bookDetail.id
                };

                axios.post(url, data).then(function (res) {
                    alert('添加成功');
                    console.log(res);
                    // 跳转到阅读记录页面
                    window.location.href = './reading.html';
                })
            },

                // 获取书本详情
                getBookDetail() {
                    var index = location.href.indexOf('=');
                    var id = location.href.slice(index + 1);
                    var url = 'http://localhost:3001/likeList/' + id;

                    axios.get(url).then(function (res) {
                        console.log(res.data);
                        bookDetail = res.data;
                        Book.renderDetail(res.data);
                    })
                },


                // 渲染详情
                renderDetail(data) {
                    var htmlStr = ` <div class="book flex">
                        <img src="${data.imgUrl}" alt="">
                        <div class="right ml-15 flex fdc jc-sa">
                            <h3>${data.bookname}</h3>
                            <p>${data.author}${data.translator}</p>
                            <li class="flex aic jc-sa">
                                <span>${data.ageRange}</span>
                                <span>习惯养成</span>
                                <span>${data.category}</span>
                            </li>
                        </div>
                    </div>

                    <div class="information mt-20">
                        <h3>出版信息</h3>
                        <p class="mt-5">作者：${data.author}</p>
                        <p>译者：${data.translator}</p>
                        <p>出版社：${data.publish}</p>
                    </div>

                    <div class="introduce mt-20 w100p">
                        <h3>简介</h3>
                        <img src="${data.introductionImg}" alt="" class="w100p mt-5">
                        <p class="f666">
                        ${data.introduction}
                        </p>
                    </div>`

                    $('#detail').html(htmlStr);
                },

                //获取列表数据
                getList() {
                    var url = 'http://localhost:3001/comment';
                    axios.get(url).then(function (res) {
                        console.log(res.data);
                        Book.render(res.data);
                    }).catch(function (err) {
                        console.log('请求失败', err);
                    })
                },
                //渲染评论列表
                render(list) {
                    var htmlStr = '';
                    list.forEach(function (item) {
                        htmlStr += `
                    <li class="item flex fdc mt-10">
                <dt class="w100p flex aic jc-sb mb-10">
                    <span class="flex aic ">
                        <img src="${item.imageUrl}" alt="" class="head-img mr-10">
                        <span>${item.username}</span>
                    </span>
                    <span class="f666">${item.date}</span>
                </dt>
                <p>${item.content}</p>
            </li>
                    `;
                    })
                    $('#link').html(htmlStr);
                }
            }
            Book.getList();
            Book.getBookDetail();
    </script>
</body>

</html>